<template>
    <div>
        <h1>显示代金券信息</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>商品名称</td>
                    <td>代金券名称</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.goodsName}}</td>
                    <td>{{item.moneyName}}</td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.totalCount }}条</span>
            <span>每页{{ info.pagesize }}条</span>
            <span>当前第{{ info.pageindex }}/{{ data.totalPage }}页</span>

            <input type="button" value="首页" @click="page(1)">
            <input type="button" value="上一页" @click="page(info.pageindex-1)">
            <input type="button" v-for="item in data.totalPage" :value="item" @click="page(item)">
            <input type="button" value="下一页" @click="page(info.pageindex+1)">
            <input type="button" value="尾页" @click="page(data.totalPage)">

        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from 'axios'
import moment from 'moment'
import {useRouter,useRoute} from "vue-router";
const router=useRouter();
const route=useRoute();
onMounted(()=>
{
    show();
})
let info:any=reactive({
    pageindex:1,
    pagesize:2
})
let data:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[]
})
const show=()=>
{
    
    axios({
        url:'http://localhost:5182/api/Money/Show',
        method:'get',
        params:info
    })
    .then((res)=>
    {
        console.log(res);
        Object.assign(data,res.data);
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
const page=(num:any)=>
{
    if(num<1)
    {
       info.pageindex=1;
       return;
    }
    if(num>data.totalPage)
    {
       info.pageindex=data.totalPage;
       return;
    }
    info.pageindex=num;
    show();
}
</script>

<style scoped>
span{
    margin: 0 5px;
}
</style>